<script setup>
import { onMounted, ref } from 'vue'
import BpmnModeler from 'bpmn-js/lib/Modeler'

const canvas = ref(null)
const modeler = ref(null)

// 默认的空流程
const emptyXML = `<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" 
                  xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" 
                  xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" 
                  id="Definitions_1" 
                  targetNamespace="http://bpmn.io/schema/bpmn">
  <bpmn:process id="Process_1" isExecutable="false">
    <bpmn:startEvent id="StartEvent_1"/>
  </bpmn:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
        <dc:Bounds x="152" y="102" width="36" height="36"/>
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn:definitions>`

onMounted(async () => {
  // 初始化 BPMN 建模器
  modeler.value = new BpmnModeler({
    container: canvas.value
  })

  try {
    await modeler.value.importXML(emptyXML)
    // 调整视图以适应内容
    const canvas = modeler.value.get('canvas')
    canvas.zoom('fit-viewport')
  } catch (err) {
    console.error('Error importing BPMN diagram', err)
  }
})

// 保存流程图
const saveXML = async () => {
  try {
    const { xml } = await modeler.value.saveXML({ format: true })
    // 创建并下载文件
    const blob = new Blob([xml], { type: 'text/xml' })
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = 'process.bpmn'
    link.click()
    URL.revokeObjectURL(link.href)
  } catch (err) {
    console.error('Error saving BPMN diagram', err)
  }
}

// 导出为 SVG
const saveSVG = async () => {
  try {
    const { svg } = await modeler.value.saveSVG()
    const blob = new Blob([svg], { type: 'image/svg+xml' })
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = 'process.svg'
    link.click()
    URL.revokeObjectURL(link.href)
  } catch (err) {
    console.error('Error saving SVG', err)
  }
}

// 导入文件
const importFile = (event) => {
  const file = event.target.files[0]
  if (!file) return

  const reader = new FileReader()
  reader.onload = async (e) => {
    try {
      await modeler.value.importXML(e.target.result)
      const canvas = modeler.value.get('canvas')
      canvas.zoom('fit-viewport')
    } catch (err) {
      console.error('Error importing BPMN file', err)
    }
  }
  reader.readAsText(file)
}
</script>

<template>
  <div class="bpmn-editor">
    <div class="toolbar">
      <input 
        type="file" 
        accept=".bpmn, .xml" 
        @change="importFile" 
        id="file-input" 
        style="display: none"
      >
      <button @click="() => document.getElementById('file-input').click()">
        导入流程
      </button>
      <button @click="saveXML">导出 BPMN</button>
      <button @click="saveSVG">导出 SVG</button>
    </div>
    <div ref="canvas" class="canvas"></div>
  </div>
</template>

<style>
/* 引入 BPMN 默认样式 */
@import 'bpmn-js/dist/assets/diagram-js.css';
@import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';

.bpmn-editor {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.toolbar {
  padding: 10px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  gap: 10px;
}

.toolbar button {
  padding: 8px 16px;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.toolbar button:hover {
  background-color: #e9ecef;
}

.canvas {
  flex-grow: 1;
  background-color: #fff;
}

/* 修复一些 BPMN.js 的样式问题 */
.djs-palette {
  background: #f8f9fa !important;
  border-right: 1px solid #dee2e6 !important;
}

.djs-context-pad {
  background-color: transparent;
}
</style> 